<template>
  <div class="container">
    <video src="https://v-cdn.zjol.com.cn/277003.mp4" ></video>
    <ul>
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
    <div>
      username={{obj.username}},age={{obj.age}}
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from 'vue'

export default {
  setup () {
    // 定义数据有2种,ref,reactive
    // 定义数组推荐用ref,虽然多了一个vlaue,但是不用担心不是响应式的情况
    const list = reactive([1, 2, 3])

    const obj = reactive({
      username: 'zs',
      age: 10
    })
    onMounted(() => {
      // list = [] //不是响应式
      // list = reactive([])//不可以
      // list.splice(0, list.length) //可以
      // list = list.filter(t => t > 1) // 不是响应式
      // list.splice(0, list.length, ...list.filter(t => t > 1)) //可以

      // obj = { username: 'ls', age: 30 } // 不是响应式
      Object.assign(obj, { username: 'ls', age: 30 })// 可以的
    })
    return {
      list,
      obj
    }
  }
}
</script>
